<template>
  <div>
    <!-- 二.传入数据 -->
    <MyProduct
    v-for="item in list"
    :key="item.id"
    :title="item.proname"
    :price="item.proprice"
    :id="item.id"
    @kan="kanfn"
    ></MyProduct>
  </div>
</template>

<script>
// 一.使用组件
// 1.引入组件
// 2.声明组件
// 3.使用组件
import MyProduct from './components/MyProduct.vue'
export default {
  components:{
    MyProduct
  },
  data(){
    return {
      list: [
        { id: 1, proname: '超级无敌椰子鸡儿', proprice: 69 },
        { id: 2, proname: '超级无敌棒棒鸡儿', proprice: 59 },
        { id: 3, proname: '超级无敌鸡你太美', proprice: 49 }
      ]
    }
  },
  methods:{
    kanfn(id) {
      const obj = this.list.find(item => item.id === id)
      obj.proprice -= 0.01
    }
  }
}
</script>

<style>

</style>